<template>
  <layout title="tabs标签">

    <layout-content title="基础使用">
      <tn-tabs :data="tabsData"></tn-tabs>
    </layout-content>

    <layout-content title="默认选中">
      <tn-tabs :data="tabsData" :current="3"></tn-tabs>
    </layout-content>

    <layout-content title="设置颜色">
      <tn-tabs :data="tabsData" type="primary" :custom-style="tabsCustomStyle"></tn-tabs>
      <tn-tabs :data="tabsData" type="success" :custom-style="tabsCustomStyle"></tn-tabs>
      <tn-tabs :data="tabsData" type="danger" :custom-style="tabsCustomStyle"></tn-tabs>
      <tn-tabs :data="tabsData" type="warning" :custom-style="tabsCustomStyle"></tn-tabs>
      <tn-tabs :data="tabsData" type="info" :custom-style="tabsCustomStyle"></tn-tabs>
      <tn-tabs :data="tabsData" bg-color="tn-bg-green--light" :custom-style="tabsCustomStyle"></tn-tabs>
      <tn-tabs :data="tabsData" bg-color="tn-bg-green--light" color="tn-color-indigo" :custom-style="tabsCustomStyle"></tn-tabs>
      <tn-tabs :data="tabsData" bg-color="tn-bg-green--light" color="tn-color-indigo" active-color="tn-color-blue" :custom-style="tabsCustomStyle"></tn-tabs>
      <tn-tabs :data="tabsData" bg-color="tn-bg-green--light" color="tn-color-indigo" bar-color="tn-bg-blue" :custom-style="tabsCustomStyle"></tn-tabs>
    </layout-content>

    <layout-content title="设置阴影">
      <tn-tabs :data="tabsData" shadow type="primary" :custom-style="tabsCustomStyle"></tn-tabs>
      <tn-tabs :data="tabsData" shadow type="success" :custom-style="tabsCustomStyle"></tn-tabs>
      <tn-tabs :data="tabsData" shadow type="danger" :custom-style="tabsCustomStyle"></tn-tabs>
      <tn-tabs :data="tabsData" shadow type="warning" :custom-style="tabsCustomStyle"></tn-tabs>
      <tn-tabs :data="tabsData" shadow type="info" :custom-style="tabsCustomStyle"></tn-tabs>
      <tn-tabs :data="tabsData" shadow shadow-color="tn-shadow-green" bg-color="tn-bg-green--light" :custom-style="tabsCustomStyle"></tn-tabs>
    </layout-content>

    <layout-content title="设置字体大小">
      <tn-tabs :data="tabsData" font-size="30" :custom-style="tabsCustomStyle"></tn-tabs>
      <tn-tabs :data="tabsData" font-size="26" :custom-style="tabsCustomStyle"></tn-tabs>
    </layout-content>

    <layout-content title="隐藏滑块">
      <tn-tabs :data="tabsData" :bar="false"></tn-tabs>
    </layout-content>

    <layout-content title="设置过渡时间">
      <tn-tabs :data="tabsData" duration="1000"></tn-tabs>
    </layout-content>

    <layout-content title="禁止滑动">
      <tn-tabs :data="noScrollTabsData" :scroll="false"></tn-tabs>
    </layout-content>

    <layout-content title="自定义样式">
      <tn-tabs :data="tabsData" :item-style="tabsItemCustomStyle" :active-item-style="tabsActiveItemCustomStyle" :bar-style="tabsTabCustomStyle"></tn-tabs>
    </layout-content>

  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnTabs from '@/tuniao-ui/components/tn-tabs/src/Tabs.vue'
import { TabData } from '@/tuniao-ui/types'

// 自定义样式
const tabsCustomStyle: CSSProperties = {
  marginTop: '20rpx'
}

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// tabs数据
const tabsData: TabData[] = [
  { title: '关注'},
  { title: '推荐'},
  { title: '热榜'},
  { title: '搞笑'},
  { title: '视频'},
  { title: '科技'},
  { title: '音乐'},
  { title: '电影'},
  { title: '游戏'}
]
const noScrollTabsData: TabData[] = tabsData.slice(0, 5)

// 自定义样式设置信息
const tabsItemCustomStyle: CSSProperties = {
  
}
const tabsActiveItemCustomStyle: CSSProperties = {
  boxShadow: 'inset rgb(230 230 230) 1px 1px 7px 0px',
}
const tabsTabCustomStyle: CSSProperties = {
  boxShadow: '1px 1px 1px 1px #01BEFF55',
  bottom: '4rpx'
}
</script>

<style lang="scss" scoped>
</style>
